<template>
  <div class="analysis-box">
    <div class="top-box">
      <div class="user-box">
        <div class="photo">
          <img
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            alt=""
          />
          <p>{{ userName }}</p>
        </div>
        <div class="tips">
          <p v-for="(item, index) in userTips" :key="index">{{ item.name }}</p>
        </div>
      </div>
      <div class="user-box-2">
        <div class="text">
          <p>您本月消费超过用户数</p>
          <p class="green">{{ userNumber }}%</p>
        </div>
        <div class="wave-box">
          <div class="wave">
            {{ userNumber }}%
            <div class="wave1"></div>
            <div class="wave2"></div>
            <div class="wave3"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="cus-box">
      <p class="last-week">
        本周消费 <span class="green-line"></span>
        <span class="green-text">¥{{ lastWeekCus }}</span>
      </p>
      <p class="now-week">
        上周消费 <span class="red-line"></span>
        <span class="red-text">¥{{ nowWeekCus }}</span>
      </p>
    </div>
    <div class="all-cus">
      <div>
        <p>
          本周累计消费： <span class="green-text">¥{{ allCus }}</span>
        </p>
        <p>
          消费总笔数 <span class="red-text">{{ cusNum }}</span> 笔
        </p>
      </div>
      <img src="@icon/cus.png" alt="" />
    </div>
    <div class="line-box"></div>
    <div class="echarts-box">
      <div id="charts" :style="{ width: '100%', height: '300px' }"></div>
    </div>
    <div class="all-cus all-cus-2">
      <div>
        <p>
          本月累计消费： <span class="green-text">¥{{ allCus }}</span>
        </p>
        <p>
          消费总笔数 <span class="red-text">{{ cusNum }}</span> 笔
        </p>
      </div>
      <img src="@icon/cus.png" alt="" />
    </div>
    <div class="line-box"></div>
    <div class="point-box">
      <h3>温馨提示</h3>
      <div class="point-item" v-for="item in tipsList">
        <img src="@icon/green-left.png" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Random } from 'mockjs'
import echarts from 'echarts'
import option from './eChartsOptions.js'
export default {
  name: 'analysis',
  data() {
    return {
      userName: '陈**',
      userNumber: Random.natural(10, 80),
      lastWeekCus: Random.natural(1000, 2000),
      nowWeekCus: Random.natural(1000, 2000),
      allCus: Random.natural(1000, 2000),
      cusNum: Random.natural(1, 20),
      userTips: [
        { name: '公益服务' },
        { name: '服饰服装' },
        { name: '休闲娱乐' },
      ],
      tipsList: [
        {
          name: '周累计消费统计周期指每周一0点至周日24点',
        },
        {
          name: '月累计消费统计周期指当月1日0点至31日(或30日) 24点',
        },
        {
          name:
            "统计包含已入账的退货交易，若累计消费金额为负数'-'，则表示退货入账金额大于消费金额.",
        },
        {
          name: '外币的消费以我行系统汇率折算成人民币计算',
        },
        {
          name: '数据更新至05月11日，仅供参考，如需还款请根据账单金额按时还款',
        },
      ],
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      var echarts = require('echarts')
      var myChart = echarts.init(document.getElementById('charts'))
      myChart.setOption(option)
    },
  },
}
</script>

<style scoped lang="stylus">
.analysis-box
  display flex
  width 100%
  flex-direction column
  background #ffffff
  min-height 100vh
  padding-bottom 88px
  .top-box
    display flex
    flex-direction column
    height 350px
    padding 30px
    box-sizing border-box
    background url("../assets/icon/analysis-banner.png") no-repeat center
    background-size cover
    .user-box
      display flex
      align-items center
      justify-content space-between
      padding-bottom 33px
      .photo
        display flex
        align-items center
        img{
          width 90px
          height 90px
          border-radius 50%
        }
        p
          font-size 36px
          margin-left 15px

      .tips
        display flex
        align-items center
        justify-content center
        font-size 20px
        p
          color #333
          margin-left 20px
          border-radius 10px
          border 1px solid #333
          padding 9px 13px
    .user-box-2
      display flex
      align-items center
      justify-content center
      .text
        display flex
        flex-direction column
        font-size 26px
        color #333
        margin-right 15px
        .green
          color #00B893
          font-size 48px
          margin-top 20px
      .wave-box
        border-radius 50%
        width 146px
        height 152px
        border 6px solid #00CCA3
        display flex
        justify-content center
        align-items center
      .wave
        position relative
        border 6px solid #fff
        width 140px
        height 140px
        border-radius 50%
        line-height 50px
        margin 0 auto
        font-size 14px
        text-align center
        overflow hidden
        animation water-wave linear infinite
        color #00B893
        background linear-gradient(to top,#B9FFF1,#ffffff)
        .wave1
          position absolute
          top 60%
          left -25%
          background #01B994
          opacity .7
          width 200%
          height 200%
          border-radius 40%
          animation inherit
          animation-duration 5s
        .wave2
          position absolute
          top 60%
          left -35%
          background #0CD8AF
          opacity .7
          width 200%
          height 200%
          border-radius 35%
          animation inherit
          animation-duration 7s
        .wave3
          position absolute
          top 60%
          left -45%
          background #19E5BC
          opacity .3
          width 200%
          height 200%
          border-radius 40%
          animation inherit
          animation-duration 11s
  .cus-box
    display flex
    flex-direction column
    padding 60px 30px
    .last-week
      color #333333
      display flex
      margin-bottom 50px
      font-size 22px
      .green-line
        margin 0 20px
        display flex
        background #00CCA3
        border-radius 16px
        height 32px
        width 200px
      .green-text
        color #00CCA3
    .now-week
      color #333333
      display flex
      font-size 22px

      .red-line
        margin 0 20px
        display flex
        background #FE827A
        border-radius 16px
        height 32px
        width 100px
      .red-text
        color #FE827A
  .all-cus
    background #F7F7F7
    opacity 0.8
    padding 50px 0 50px 50px
    color #333
    display flex
    align-items center
    justify-content space-between
    margin 0 30px 50px
    p
      padding-bottom 20px
      &:first-of-type
        font-scale 28px
        border-bottom 1px solid #e6e6e6
        span{
          font-size 40px
        }
      &:last-of-type
        padding-top 20px
        font-size 28px

    img
      width 88px
      height 100px


  .all-cus-2
    margin-top 50px
  .echarts-box
    padding 0 30px
  .point-box
    display flex
    flex-direction column
    padding 30px
    h3
      font-size 40px
      line-height 2
      margin-bottom 10px
    span
      color #606060
      font-size 26px
      line-height 1.3
    .point-item
      display flex
      align-items center
      margin-bottom 20px

      img
        width 17px
        height 30px
        margin-right 10px

.line-box
  height 20px
  background #F7F7F7

@keyframes  water-wave{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.green-text
  color #00CCA3
.red-text
  color #FE827A
</style>
